// ************************************************判断本地是否有token
// 没有token的时候
if (localStorage.getItem("token") == null) {
  location.href = "/login.html"
}


// 【！！！！！以后有需求：必须拆分三个小问题：
//      用户对谁？发生什么行为？很多谁它怎么了？
//  】
layui.use(['layer'], function () {
  let layer = layui.layer

  $(".new-todo").on("keydown", function (e) {
    //  2.键盘码：事件对象。e.keyCode
    //  3.当13的时候特别对待
    if (e.keyCode == 13) {

      // 4.页面有反应：用户输入的内容有放入下方；
      //    4.1 获取用户输入输入框的内容
      let val = $(".new-todo").val();
      if (val == '') {
        layer.msg('计划不能为空')
        return
      }

      $.ajax({
        type: 'post',
        url: '/todo/add',
        data: {
          content: val,
          isdone: 0
        },
        success: function (res) {
          layer.msg(res.message)

          if (res.status == 0) {
            $('.new-todo').val('')
            list()
          }
        }
      })
    }
  });
  //    4.2 把上面值设置到DOM节点内部，然后DOM节点内部添加到ul内
  //       4.2.1 把上面值 val
  //       4.2.2 创建dom    【全新JQ对象! 不能用""原因，不能回车,双引号半路成对！】
  function list() {
    $.ajax({
      type: 'get',
      url: '/todo/list',
      success: function (res) {
        if (res.status == 0) {
          let str = ''
          $('ul').html(str)
          res.arr.forEach(ele => {
            str += `<li class=${ele.isdone?'completed':""}>
            <div class="view">
              <input class='toggle' type="checkbox" ${ele.isdone?'checked':''} _id=${ele.id} _isdone=${ele.isdone}>
              <label>${ele.content}</label>
              <button class="destroy" _id=${ele.id}></button>
            </div>
            <input class="edit" value="Create a TodoMVC template" _id=${ele.id}>
          </li>`
          })
          $('ul').html(str)
        }
      }
    })
  }
  list()


  //       4.2.3 添加到ul   【需要记住语法：添加语法 父级JQ.append(新JQ);    JQ.prepend(新JQ)   兄弟元素.before()  after】
  $("ul").on("click", ".destroy", function () {

    let id = $(this).attr("_id")
    $.ajax({
      type: "GET",
      url: "/todo/del/" + id,
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });

  });


  $("ul").on("click", ".toggle", function () {
    let id = $(this).attr("_id");
    let isdone = $(this).attr("_isdone") == 1 ? 0 : 1;

    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: {
        id: id,
        isdone: isdone
      },
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });



    $(this).parents("li").toggleClass("completed");
  });
  //   4.3  清空   【遇到错误：先看控制台！如果没有错误的时候，加上某些代码后，出现了错误！】
  // val = ""; 不生效  清空的时个复印件！
  // $(".new-todo").val() = ""; 这样语法无效 不对
  // $(".new-todo").val("") //  【记忆：JQ.val()没有参数代表获取。有值代表设置！.text()  .html()】

  $("ul").on("dblclick", "label", function () {
    // 1.给父级添加类名
    $(this).parents("li").addClass("editing");

    // 2.中间文字  跑到  了新出来input
    let str = $(this).text();

    // 3.找父级下一个兄弟   
    $(this).parent().next().val(str);
  });
  $("ul").on("blur", ".edit", function () {
    // 1.li去掉样式
    $(this).parent().removeClass("editing");

    // 2. 输入框的值  跑到  文字部分
    let id = $(this).attr("_id");
    let val = $(this).val();
    if (val == "") {
      layer.msg("计划不能为空");
      return;
    }
    $.ajax({
      type: "POST",
      url: "/todo/edit",
      data: {
        id: id,
        content: val
      },
      success: function (res) {
        layer.msg(res.message)
        if (res.status == 0) {
          list();
        }
      }
    });


  })
})




// 需求：用户输入完，按下回车，有个条内容就显示在下面；
// 分析：当用户按完键盘 enter的时候，配合用户动作做一些反应；
//    1.用户按键盘：







// 需求：用户对x 点击chick后，有li消失
// 步骤：
//    1. 给x添加点击：不能直接添加！【事件委托：委托，我不要哨兵，派给父级！事件默认在冒泡阶段执行！】
// $("ul").on("click", ".destroy", function () {
//   //  2.谁谁谁怎么了？li被删了！
//   //     2.1 当前点x 对应 li  

//   //     2.2 被干掉
//   //       【当前: this   e.target e.currentTarget 记住！！】
//   //       【意见：vue语法  7.30】
//   $(this).parents("li").remove();
// });




// 需求：用户对 圈 点击click后，样式改变！
// $("ul").on("click", ".toggle", function () {
//   //       【样式操作：样式四个方法】
//   $(this).parents("li").toggleClass("completed");
// });







// 需求：用户对 中间文字 双击 ，当前整个li添加一个样式 editng
//                             中间文字----->跑到了新出来input
// 步骤：
//     1.
// $("ul").on("dblclick", "label", function () {
//   // 1.给父级添加类名
//   $(this).parents("li").addClass("editing");


//   // 2.中间文字  跑到  了新出来input
//   let str = $(this).text(); // 【回扣：记忆不牢,查询筛选】

//   // 3.找父级下一个兄弟   
//   $(this).parent().next().val(str);

// });


// 需求： 用户对谁？发生什么行为？很多谁它怎么了？用户对input，失去焦点行为，li去掉样式
//                                                                         输入框  跑到 文字部分
// $("ul").on("blur", ".edit", function () {
//   // 1.li去掉样式
//   $(this).parent().removeClass("editing");

//   // 2. 输入框的值  跑到  文字部分
//   let str = $(this).val();
//   $(this).prev().find("label").text(str);

// })












//    
//